import React, { Component, Fragment } from "react";
//propTypes

import TableBasis from "./Table";
import { TableList } from "../../api/common";
import { Modal, Form, Input, Button, message } from "antd";
import requestUrl from "../../api/Url";
class TableComponet extends Component {
  state = {
    pageSize: 10,
    pageNumber: 1,
    keyWord: "",
    data: [],
    //表格加载动画
    loadingTable: false,
    total: 0,
    //确认弹窗
    checkboxValue: [],
    //复选框数据
    selectRowKeys: [],
  };
  //生命周期挂载完成
  componentDidMount() {
    this.TableList();
  }
  TableList = () => {
    const { pageNumber, pageSize } = this.state;
    this.setState({ loadingTable: true });
    const resquestData = {
      url: requestUrl[this.props.config.url],

      data: {
        pageNumber: pageNumber,
        pageSize: pageSize,
      },
    };

    //获取列表数据
    TableList(resquestData)
      .then((response) => {
        const resquestData = response.data.data; //数据
        if (resquestData.data) {
          //返回一个null
          this.setState({
            data: resquestData.data,
            total: resquestData.total,
          });
        }
        this.setState({ loadingTable: false });
      })
      .catch((error) => {
        this.setState({ loadingTable: false });
      });
  };
  //复选框
  onChecked = () => {};
  //当前页码
  onChangCurrnePage = (value) => {
    this.setState(
      {
        pageNumber: value,
      },
      () => {
        this.TableList();
      }
    );
  };
  //下拉页面
  onChangeSizePage = (value, page) => {
    this.setState(
      {
        pageNumber: 1,
        pageSize: page,
      },
      () => {
        this.TableList();
      }
    );
  };
  //确认弹窗
  modalToken = () => {
    //判断是否一选择删除的数据
    if (this.state.checkboxValue.length === 0) {
      message.info("请选择需要删除的数据");
      return false;
    }
    this.setState({ confirmLoading: true });
    const id = this.state.checkboxValue.join();
    const resquestData = {
      url: requestUrl[`${this.props.config.url}Delete`],
      data: { id },
    };
  };
  //删除
  onHandlerDelete(id) {
    if (!id) {
      //批量删除
      if (this.state.selectRowKeys.length === 0) {
        return false;
      }
      id = this.state.selectRowKeys.join();
    }
    this.setState({
      visible: true,
      id,
    });
  }
  //搜索
  onFinish = (value) => {
    console.log(value);
    this.setState({
      pageNumber: 1,
      pageSize: 10,
      keyWord: value.name,
    });
  };
  render() {
    const { thead, checkbox, rowKey } = this.props.config;
    const rowSelection = {
      onChange: this.onChecked,
    };
    return (
      <Fragment>
        {/* 筛选组件 */}
        <Form layout="inline" onFinish={this.onFinish}>
          <Form.Item label="部门名称" name="name">
            <Input placeholder="请输入部门名称" />
          </Form.Item>
          <Form.Item shouldUpdate>
            {() => (
              <Button type="primary" htmlType="submit">
                搜索
              </Button>
            )}
          </Form.Item>
        </Form>
        {/* table组件 */}

        <div className="table-warp">
          <TableBasis
            columns={thead}
            dataSource={this.state.data}
            total={this.state.total}
            changePageCurrent={this.onChangCurrnePage}
            changePageSize={this.onChangeSizePage}
            handlerDelete={() => {
              this.onHandlerDelete();
            }}
            rowSelection={checkbox ? rowSelection : null}
            rowKey={rowKey}
          ></TableBasis>
        </div>

        {/* 弹窗 */}
        <Modal
          title="提示"
          visible={this.state.visible}
          onOk={this.modalToken}
          confirmLoading={this.state.confirmLoading}
          onCancel={() => {
            this.setState({ visible: false });
          }}
          okText="确认"
          cancelText="取消"
        >
          <p className="text-warp">
            确认删除此信息吗?
            <strong className="text-ider">删除后无法恢复</strong>
          </p>
        </Modal>
      </Fragment>
    );
  }
}
export default TableComponet;
